HTML

CSS的話
就一定要說到所謂的「選取器」

選取器就是你要套用CSS樣式的目標，你必須要去找出他來

但是網頁上這麼多元素
是要怎麼找呢

這時有幾種方法

• 用HTML元素找
• 用class找
• 用id找
• 用狀態找
• 用屬性找
• 用虛擬元素找 (我自己是比較少用到)

用HTML元素找是怎樣找呢

這時就回到我們介紹的HTML

有所謂的

<div></div>
<h1></h1>
<a></a>
<span></span>

之類的標籤

我們從CSS 去選取

span {
  background-color: skyblue;
}

這樣的話
我們對應的HTML檔案，有用到
< span > 這標籤的就會背景顏色變成天藍色

• 用class找

html如下

<h1 class="aaaaa"></h1>

CSS部分

.aaaaa {
    color: skyblue;
}

就是用「 . 」這個符號，後面帶class，
這樣就可以選取到對應的html的class了

• 用id找

html如下

<h1 id="bbbb" class="aaaaa"></h1>

CSS部分

#bbbb {
 background-color: skyblue;
}

但是這邊有一個重點
id有唯一性，所以我們通常會把id在其他場合抓來用，
平常的話都是用class，因為可以很多元素都用同樣的class
但是每一個id在html中只會有一個

• 用狀態找

html如下

<a>這是一個東西</a>

CSS

a:hover {
  color: orange;
}

這個CSS的意思是，當a被滑鼠移上去時，要把文字顏色改為橘色

使用方式是
元素 + :狀態

狀態的列表
可以參考這個網頁

https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes

• 用屬性找

html

<ul>
  <li><a href="#internal">Internal link</a></li> 
</ul>

CSS

a[href^="#"] {
  background-color: gold;
}

這段CSS的意思就是
a元素的href屬性，值有#的話
就把背景顏色套用為金色

• 用虛擬元素找

html

<p>
這是一行文字，</br>
我很長，長到會有第二行
</p>

CSS

p::first-line {
  color: blue;
  text-transform: uppercase;
}

這段CSS的意思是說，

元素p的第一行，字體顏色是藍色，英文文字會轉成英文大寫

剩下的我們明天繼續